<template>
  <div class="wrapper">
    <div class="my-inbox" ref="box" @click.prevent="">
      <div
        v-for="index in 5"
        :key="index"
        :id="index"
        class="single_start"
        :class="{ activeStar: index <= iSelect }"
        @click="clickOnItem(index)"
      ></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'lz-roating-bar',
    props: {
      iScore: {
        type: Number,
        default: 5
      }
    },
    data() {
      return {
        score: this.getScore(),
        iSelect: this.iScore
      }
    },

    methods: {
      clickOnItem(idx) {
        if (idx == this.iSelect) {
          return
        }
        this.iSelect = idx

        // 更新数据
        this.$emit('update:iScore', this.getScore())
      },
      getScore() {
        return this.iSelect
      }
    }
  }
</script>

<style scoped="scoped" lang="scss">
  .wrapper{
    .my-inbox {
      overflow-y: hidden;
      overflow-x: scroll;
      white-space: nowrap;
      .single_start {
        display: inline-block;
        height: 20px;
        width: 20px;
        background-image: url('../../assets/starOff.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100%;
        margin-right: 10px;
      }
      .activeStar {
        background-image: url('../../assets/starOn@2x.png');
      }
    }
  }


</style>
